<script setup>
import { ref } from 'vue'
import { useRouter } from 'vue-router'
import { Search } from '@element-plus/icons-vue'

// 路由实例
const router = useRouter()

// 当前选中的菜单项
const activeMenu = ref('users')

// 处理菜单选择
const handleMenuSelect = (index) => {
  activeMenu.value = index
}

// 用户管理数据
const userData = ref([
  { id: 1, username: 'user001', name: '张三', role: '普通用户', status: '正常', lastLogin: '2023-05-15 08:30:22', registerDate: '2023-01-10' },
  { id: 2, username: 'user002', name: '李四', role: '普通用户', status: '正常', lastLogin: '2023-05-14 16:45:10', registerDate: '2023-01-15' },
  { id: 3, username: 'user003', name: '王五', role: 'VIP用户', status: '正常', lastLogin: '2023-05-13 10:22:45', registerDate: '2023-02-01' },
  { id: 4, username: 'user004', name: '赵六', role: '普通用户', status: '禁用', lastLogin: '2023-04-30 14:15:36', registerDate: '2023-02-10' },
  { id: 5, username: 'user005', name: '钱七', role: 'VIP用户', status: '正常', lastLogin: '2023-05-15 09:12:33', registerDate: '2023-03-05' }
])

// 商家管理数据
const merchantData = ref([
  { id: 1, name: '耐克官方旗舰店', owner: '李明', contactPhone: '13800138001', status: '正常', productCount: 128, salesVolume: '¥1,256,890', registerDate: '2022-10-15' },
  { id: 2, name: '阿迪达斯专卖店', owner: '王芳', contactPhone: '13900139002', status: '正常', productCount: 96, salesVolume: '¥986,520', registerDate: '2022-11-20' },
  { id: 3, name: '新百伦专营店', owner: '张伟', contactPhone: '13700137003', status: '审核中', productCount: 64, salesVolume: '¥458,720', registerDate: '2023-01-05' },
  { id: 4, name: '匡威中国官方店', owner: '刘强', contactPhone: '13600136004', status: '正常', productCount: 72, salesVolume: '¥562,340', registerDate: '2022-12-10' },
  { id: 5, name: '彪马运动专营店', owner: '陈静', contactPhone: '13500135005', status: '暂停', productCount: 58, salesVolume: '¥325,680', registerDate: '2023-02-18' }
])

// 商品审核数据
const productReviewData = ref([
  { id: 1, name: 'Air Jordan 1 高帮篮球鞋', merchant: '耐克官方旗舰店', category: '篮球鞋', price: 1299, status: '待审核', submitTime: '2023-05-14 10:30:22' },
  { id: 2, name: 'Ultra Boost 5.0 跑步鞋', merchant: '阿迪达斯专卖店', category: '跑步鞋', price: 1499, status: '已通过', submitTime: '2023-05-13 14:25:10', reviewTime: '2023-05-14 09:15:30' },
  { id: 3, name: '574 经典复古鞋', merchant: '新百伦专营店', category: '休闲鞋', price: 799, status: '待审核', submitTime: '2023-05-15 08:45:36' },
  { id: 4, name: 'Chuck 70 高帮帆布鞋', merchant: '匡威中国官方店', category: '帆布鞋', price: 599, status: '已拒绝', submitTime: '2023-05-12 16:20:45', reviewTime: '2023-05-13 11:30:22', reason: '商品信息不完整' },
  { id: 5, name: 'Suede Classic 麂皮板鞋', merchant: '彪马运动专营店', category: '板鞋', price: 699, status: '待审核', submitTime: '2023-05-15 09:10:18' }
])

// 首页轮播数据
const carouselData = ref([
  { id: 1, title: '夏季新款运动鞋大促', image: 'https://via.placeholder.com/800x400?text=Summer+Shoes+Sale', link: '/promotion/summer', status: '已上线', startDate: '2023-05-01', endDate: '2023-06-30', priority: 1 },
  { id: 2, title: 'Air Jordan 新品发布', image: 'https://via.placeholder.com/800x400?text=New+Air+Jordan', link: '/product/aj2023', status: '已上线', startDate: '2023-05-10', endDate: '2023-05-31', priority: 2 },
  { id: 3, title: '跑步鞋专场', image: 'https://via.placeholder.com/800x400?text=Running+Shoes', link: '/category/running', status: '未上线', startDate: '2023-06-01', endDate: '2023-06-15', priority: 3 },
  { id: 4, title: '篮球鞋折扣季', image: 'https://via.placeholder.com/800x400?text=Basketball+Shoes+Discount', link: '/promotion/basketball', status: '已上线', startDate: '2023-04-15', endDate: '2023-05-20', priority: 4 },
  { id: 5, title: '经典复古鞋系列', image: 'https://via.placeholder.com/800x400?text=Classic+Retro+Shoes', link: '/category/retro', status: '未上线', startDate: '2023-06-10', endDate: '2023-07-10', priority: 5 }
])

// 订单管理数据
const orderData = ref([
  { id: 'ORD20230515001', user: '张三', products: 'Air Jordan 1 高帮篮球鞋 x 1', totalAmount: 1299, status: '待发货', paymentMethod: '微信支付', createTime: '2023-05-15 10:30:22', payTime: '2023-05-15 10:35:46' },
  { id: 'ORD20230514002', user: '李四', products: 'Ultra Boost 5.0 跑步鞋 x 1, 运动袜 x 3', totalAmount: 1598, status: '已发货', paymentMethod: '支付宝', createTime: '2023-05-14 16:20:10', payTime: '2023-05-14 16:25:33', shipTime: '2023-05-15 09:10:25', trackingNumber: 'SF1234567890' },
  { id: 'ORD20230513003', user: '王五', products: '574 经典复古鞋 x 2', totalAmount: 1598, status: '已完成', paymentMethod: '银联', createTime: '2023-05-13 14:15:36', payTime: '2023-05-13 14:20:12', shipTime: '2023-05-14 10:05:18', deliveryTime: '2023-05-15 14:30:00', trackingNumber: 'YT9876543210' },
  { id: 'ORD20230512004', user: '赵六', products: 'Chuck 70 高帮帆布鞋 x 1', totalAmount: 599, status: '待付款', paymentMethod: '未支付', createTime: '2023-05-12 18:45:20' },
  { id: 'ORD20230511005', user: '钱七', products: 'Suede Classic 麂皮板鞋 x 1, 运动背包 x 1', totalAmount: 998, status: '已取消', paymentMethod: '未支付', createTime: '2023-05-11 20:30:15', cancelTime: '2023-05-12 20:30:15', cancelReason: '用户取消' }
])

// 站内通知管理数据
const notificationData = ref([
  { id: 1, title: '618鞋类促销活动即将开始', content: '6月1日至6月18日，全场鞋类商品低至5折起，更有满减优惠等你来拿！', type: '活动通知', status: '已发布', publishTime: '2023-05-15 08:00:00', targetUsers: '全部用户' },
  { id: 2, title: '系统维护通知', content: '系统将于2023年5月20日凌晨2:00-4:00进行例行维护，期间网站可能无法访问，敬请谅解。', type: '系统通知', status: '已发布', publishTime: '2023-05-14 10:00:00', targetUsers: '全部用户' },
  { id: 3, title: 'VIP用户专享优惠券已发放', content: '尊敬的VIP用户，您的专属优惠券已发放至账户，请在"我的优惠券"中查看并使用。', type: '会员通知', status: '已发布', publishTime: '2023-05-13 12:00:00', targetUsers: 'VIP用户' },
  { id: 4, title: '新品上架通知 - 2023夏季系列', content: '2023夏季新款运动鞋已全面上架，包括Nike、Adidas、New Balance等多个品牌的最新款式，欢迎选购！', type: '商品通知', status: '待发布', publishTime: '2023-05-20 10:00:00', targetUsers: '全部用户' },
  { id: 5, title: '账户安全提醒', content: '为保障您的账户安全，请定期修改密码并开启双重认证。如发现账户异常，请立即联系客服。', type: '安全通知', status: '已发布', publishTime: '2023-05-10 09:00:00', targetUsers: '全部用户' }
])

// 系统设置数据
const systemSettings = ref({
  site: {
    siteName: '我的足球鞋商城',
    siteDescription: '专业的足球鞋在线购物平台',
    logo: 'https://via.placeholder.com/200x60?text=MyFootballShop',
    contactEmail: 'support@myfootballshop.com',
    contactPhone: '400-123-4567',
    icp: '京ICP备12345678号'
  },
  payment: {
    enableWechatPay: true,
    enableAliPay: true,
    enableUnionPay: true,
    enableCashOnDelivery: false
  },
  shipping: {
    defaultShippingFee: 10,
    freeShippingThreshold: 99
  },
  user: {
    enableRegister: true,
    requireEmailVerification: true,
    requirePhoneVerification: false,
    passwordMinLength: 8,
    sessionTimeout: 30
  },
  notification: {
    enableEmailNotification: true,
    enableSmsNotification: true,
    enablePushNotification: false
  }
})
</script>

<template>
  <div class="admin-view">
    <el-container class="admin-container">
      <!-- 左侧菜单栏 -->
      <el-aside width="250px" class="menu-aside">
        <div class="menu-header">
          <h2>系统管理</h2>
        </div>
        <el-menu
          :default-active="activeMenu"
          class="admin-menu"
          @select="handleMenuSelect"
        >
          <el-menu-item index="users">
            <el-icon><icon-menu /></el-icon>
            <span>用户管理</span>
          </el-menu-item>
          <el-menu-item index="merchants">
            <el-icon><icon-menu /></el-icon>
            <span>商家管理</span>
          </el-menu-item>
          <el-menu-item index="products">
            <el-icon><icon-menu /></el-icon>
            <span>商品管理</span>
          </el-menu-item>
          <el-menu-item index="product-review">
            <el-icon><icon-menu /></el-icon>
            <span>商品审核</span>
          </el-menu-item>
          <el-menu-item index="carousel">
            <el-icon><icon-menu /></el-icon>
            <span>首页轮播</span>
          </el-menu-item>
          <el-menu-item index="orders">
            <el-icon><icon-menu /></el-icon>
            <span>订单管理</span>
          </el-menu-item>
          <el-menu-item index="notifications">
            <el-icon><icon-menu /></el-icon>
            <span>站内通知</span>
          </el-menu-item>
          <el-menu-item index="settings">
            <el-icon><icon-menu /></el-icon>
            <span>系统设置</span>
          </el-menu-item>
        </el-menu>
      </el-aside>
      
      <!-- 主内容区域 -->
      <el-main class="admin-main">
        <!-- 用户管理 -->
        <div v-if="activeMenu === 'users'" class="content-section">
          <h2>用户管理</h2>
          <el-card class="content-card">
            <div class="toolbar">
              <el-input placeholder="搜索用户名/姓名" style="width: 300px;" clearable>
                <template #prefix>
                  <el-icon><Search /></el-icon>
                </template>
              </el-input>
              <el-select placeholder="状态" style="width: 150px; margin-left: 10px;">
                <el-option label="全部状态" value="" />
                <el-option label="正常" value="正常" />
                <el-option label="禁用" value="禁用" />
              </el-select>
              <el-button type="primary" style="margin-left: 10px;">搜索</el-button>
              <el-button type="success" style="margin-left: 10px;">添加用户</el-button>
            </div>
            
            <el-table :data="userData" style="margin-top: 20px;">
              <el-table-column prop="id" label="ID" width="80" />
              <el-table-column prop="username" label="用户名" width="120" />
              <el-table-column prop="name" label="姓名" width="120" />
              <el-table-column prop="role" label="角色" width="120" />
              <el-table-column prop="status" label="状态" width="120">
                <template #default="{row}">
                  <el-tag :type="row.status === '正常' ? 'success' : 'danger'">{{ row.status }}</el-tag>
                </template>
              </el-table-column>
              <el-table-column prop="lastLogin" label="最后登录时间" width="180" />
              <el-table-column prop="registerDate" label="注册日期" width="120" />
              <el-table-column label="操作" width="200">
                <template #default>
                  <el-button size="small" type="primary">编辑</el-button>
                  <el-button size="small" type="danger">禁用</el-button>
                  <el-button size="small" type="info">详情</el-button>
                </template>
              </el-table-column>
            </el-table>
            
            <div class="pagination" style="margin-top: 20px; text-align: right;">
              <el-pagination
                background
                layout="total, sizes, prev, pager, next, jumper"
                :total="50"
                :page-sizes="[10, 20, 30, 50]"
                :page-size="10"
              />
            </div>
          </el-card>
        </div>
        
        <!-- 商品管理 -->
        <div v-if="activeMenu === 'products'" class="content-section">
          <h2>商品管理</h2>
          <el-card class="content-card">
            <div class="toolbar">
              <el-input placeholder="搜索商品名称/编号" style="width: 300px;" clearable>
                <template #prefix>
                  <el-icon><Search /></el-icon>
                </template>
              </el-input>
              <el-select placeholder="商品分类" style="width: 150px; margin-left: 10px;">
                <el-option label="全部分类" value="" />
                <el-option label="足球鞋" value="足球鞋" />
                <el-option label="篮球鞋" value="篮球鞋" />
                <el-option label="跑步鞋" value="跑步鞋" />
                <el-option label="休闲鞋" value="休闲鞋" />
              </el-select>
              <el-button type="primary" style="margin-left: 10px;">搜索</el-button>
              <el-button type="success" style="margin-left: 10px;">添加商品</el-button>
            </div>
            
            <el-table :data="productReviewData" style="margin-top: 20px;">
              <el-table-column prop="id" label="ID" width="80" />
              <el-table-column prop="name" label="商品名称" min-width="180" />
              <el-table-column prop="merchant" label="所属商家" width="150" />
              <el-table-column prop="category" label="分类" width="100" />
              <el-table-column prop="price" label="价格" width="100">
                <template #default="{row}">
                  ¥{{ row.price }}
                </template>
              </el-table-column>
              <el-table-column label="操作" width="250">
                <template #default>
                  <el-button size="small" type="primary">编辑</el-button>
                  <el-button size="small" type="success">上架</el-button>
                  <el-button size="small" type="danger">下架</el-button>
                  <el-button size="small" type="info">详情</el-button>
                </template>
              </el-table-column>
            </el-table>
            
            <div class="pagination" style="margin-top: 20px; text-align: right;">
              <el-pagination
                background
                layout="total, sizes, prev, pager, next, jumper"
                :total="50"
                :page-sizes="[10, 20, 30, 50]"
                :page-size="10"
              />
            </div>
          </el-card>
        </div>
        
        <!-- 商家管理 -->
        <div v-if="activeMenu === 'merchants'" class="content-section">
          <h2>商家管理</h2>
          <el-card class="content-card">
            <div class="toolbar">
              <el-input placeholder="搜索商家名称/负责人" style="width: 300px;" clearable>
                <template #prefix>
                  <el-icon><Search /></el-icon>
                </template>
              </el-input>
              <el-select placeholder="商家状态" style="width: 150px; margin-left: 10px;">
                <el-option label="全部状态" value="" />
                <el-option label="正常" value="正常" />
                <el-option label="审核中" value="审核中" />
                <el-option label="暂停" value="暂停" />
              </el-select>
              <el-button type="primary" style="margin-left: 10px;">搜索</el-button>
              <el-button type="success" style="margin-left: 10px;">添加商家</el-button>
            </div>
            
            <el-table :data="merchantData" style="margin-top: 20px;">
              <el-table-column prop="id" label="ID" width="80" />
              <el-table-column prop="name" label="商家名称" min-width="180" />
              <el-table-column prop="owner" label="负责人" width="100" />
              <el-table-column prop="contactPhone" label="联系电话" width="150" />
              <el-table-column prop="status" label="状态" width="100">
                <template #default="{row}">
                  <el-tag :type="row.status === '正常' ? 'success' : (row.status === '审核中' ? 'warning' : 'info')">{{ row.status }}</el-tag>
                </template>
              </el-table-column>
              <el-table-column prop="productCount" label="商品数量" width="100" />
              <el-table-column prop="salesVolume" label="销售额" width="120" />
              <el-table-column label="操作" width="250">
                <template #default="{row}">
                  <el-button size="small" type="primary">编辑</el-button>
                  <el-button size="small" type="success" v-if="row.status === '审核中'">审核</el-button>
                  <el-button size="small" type="warning" v-if="row.status === '正常'">暂停</el-button>
                  <el-button size="small" type="success" v-if="row.status === '暂停'">恢复</el-button>
                  <el-button size="small" type="info">详情</el-button>
                </template>
              </el-table-column>
            </el-table>
            
            <div class="pagination" style="margin-top: 20px; text-align: right;">
              <el-pagination
                background
                layout="total, sizes, prev, pager, next, jumper"
                :total="50"
                :page-sizes="[10, 20, 30, 50]"
                :page-size="10"
              />
            </div>
          </el-card>
        </div>
        
        <!-- 订单管理 -->
        <div v-if="activeMenu === 'orders'" class="content-section">
          <h2>订单管理</h2>
          <el-card class="content-card">
            <div class="toolbar">
              <el-input placeholder="搜索订单号/用户名" style="width: 300px;" clearable>
                <template #prefix>
                  <el-icon><Search /></el-icon>
                </template>
              </el-input>
              <el-select placeholder="订单状态" style="width: 150px; margin-left: 10px;">
                <el-option label="全部状态" value="" />
                <el-option label="待付款" value="待付款" />
                <el-option label="待发货" value="待发货" />
                <el-option label="已发货" value="已发货" />
                <el-option label="已完成" value="已完成" />
                <el-option label="已取消" value="已取消" />
              </el-select>
              <el-date-picker
                style="width: 240px; margin-left: 10px;"
                type="daterange"
                range-separator="至"
                start-placeholder="开始日期"
                end-placeholder="结束日期"
              />
              <el-button type="primary" style="margin-left: 10px;">搜索</el-button>
            </div>
            
            <el-table :data="orderData" style="margin-top: 20px;">
              <el-table-column prop="id" label="订单号" width="150" />
              <el-table-column prop="user" label="用户" width="100" />
              <el-table-column prop="products" label="商品信息" min-width="200" show-overflow-tooltip />
              <el-table-column prop="totalAmount" label="订单金额" width="100">
                <template #default="{row}">
                  ¥{{ row.totalAmount }}
                </template>
              </el-table-column>
              <el-table-column prop="status" label="订单状态" width="100">
                <template #default="{row}">
                  <el-tag 
                    :type="row.status === '已完成' ? 'success' : (row.status === '待付款' ? 'warning' : (row.status === '已取消' ? 'info' : 'primary'))"
                  >
                    {{ row.status }}
                  </el-tag>
                </template>
              </el-table-column>
              <el-table-column prop="createTime" label="创建时间" width="180" />
              <el-table-column label="操作" width="250">
                <template #default="{row}">
                  <el-button size="small" type="primary" v-if="row.status === '待发货'">发货</el-button>
                  <el-button size="small" type="success" v-if="row.status === '待付款'">提醒付款</el-button>
                  <el-button size="small" type="warning" v-if="row.status === '待付款'">取消订单</el-button>
                  <el-button size="small" type="info">订单详情</el-button>
                </template>
              </el-table-column>
            </el-table>
            
            <div class="pagination" style="margin-top: 20px; text-align: right;">
              <el-pagination
                background
                layout="total, sizes, prev, pager, next, jumper"
                :total="50"
                :page-sizes="[10, 20, 30, 50]"
                :page-size="10"
              />
            </div>
          </el-card>
        </div>
        
        <!-- 系统设置 -->
        <div v-if="activeMenu === 'settings'" class="content-section">
          <h2>系统设置</h2>
          <el-tabs type="border-card">
            <el-tab-pane label="网站设置">
              <el-form :model="systemSettings.site" label-width="120px" style="max-width: 600px;">
                <el-form-item label="网站名称">
                  <el-input v-model="systemSettings.site.siteName" />
                </el-form-item>
                <el-form-item label="网站描述">
                  <el-input v-model="systemSettings.site.siteDescription" type="textarea" rows="2" />
                </el-form-item>
                <el-form-item label="网站Logo">
                  <div class="logo-preview">
                    <el-image :src="systemSettings.site.logo" style="width: 200px; height: 60px" />
                  </div>
                  <el-button type="primary" style="margin-top: 10px;">上传Logo</el-button>
                </el-form-item>
                <el-form-item label="联系邮箱">
                  <el-input v-model="systemSettings.site.contactEmail" />
                </el-form-item>
                <el-form-item label="联系电话">
                  <el-input v-model="systemSettings.site.contactPhone" />
                </el-form-item>
                <el-form-item label="ICP备案号">
                  <el-input v-model="systemSettings.site.icp" />
                </el-form-item>
                <el-form-item>
                  <el-button type="primary">保存设置</el-button>
                </el-form-item>
              </el-form>
            </el-tab-pane>
            
            <el-tab-pane label="支付设置">
              <el-form :model="systemSettings.payment" label-width="150px" style="max-width: 600px;">
                <el-form-item label="启用微信支付">
                  <el-switch v-model="systemSettings.payment.enableWechatPay" />
                </el-form-item>
                <el-form-item label="启用支付宝支付">
                  <el-switch v-model="systemSettings.payment.enableAliPay" />
                </el-form-item>
                <el-form-item label="启用银联支付">
                  <el-switch v-model="systemSettings.payment.enableUnionPay" />
                </el-form-item>
                <el-form-item label="启用货到付款">
                  <el-switch v-model="systemSettings.payment.enableCashOnDelivery" />
                </el-form-item>
                <el-form-item>
                  <el-button type="primary">保存设置</el-button>
                </el-form-item>
              </el-form>
            </el-tab-pane>
            
            <el-tab-pane label="物流设置">
              <el-form :model="systemSettings.shipping" label-width="150px" style="max-width: 600px;">
                <el-form-item label="默认运费(元)">
                  <el-input-number v-model="systemSettings.shipping.defaultShippingFee" :min="0" :precision="2" />
                </el-form-item>
                <el-form-item label="免运费阈值(元)">
                  <el-input-number v-model="systemSettings.shipping.freeShippingThreshold" :min="0" :precision="2" />
                </el-form-item>
                <el-form-item>
                  <el-button type="primary">保存设置</el-button>
                </el-form-item>
              </el-form>
            </el-tab-pane>
            
            <el-tab-pane label="用户设置">
              <el-form :model="systemSettings.user" label-width="180px" style="max-width: 600px;">
                <el-form-item label="允许新用户注册">
                  <el-switch v-model="systemSettings.user.enableRegister" />
                </el-form-item>
                <el-form-item label="要求邮箱验证">
                  <el-switch v-model="systemSettings.user.requireEmailVerification" />
                </el-form-item>
                <el-form-item label="要求手机验证">
                  <el-switch v-model="systemSettings.user.requirePhoneVerification" />
                </el-form-item>
                <el-form-item label="密码最小长度">
                  <el-input-number v-model="systemSettings.user.passwordMinLength" :min="6" :max="20" />
                </el-form-item>
                <el-form-item label="会话超时时间(分钟)">
                  <el-input-number v-model="systemSettings.user.sessionTimeout" :min="5" :max="120" />
                </el-form-item>
                <el-form-item>
                  <el-button type="primary">保存设置</el-button>
                </el-form-item>
              </el-form>
            </el-tab-pane>
            
            <el-tab-pane label="通知设置">
              <el-form :model="systemSettings.notification" label-width="180px" style="max-width: 600px;">
                <el-form-item label="启用邮件通知">
                  <el-switch v-model="systemSettings.notification.enableEmailNotification" />
                </el-form-item>
                <el-form-item label="启用短信通知">
                  <el-switch v-model="systemSettings.notification.enableSmsNotification" />
                </el-form-item>
                <el-form-item label="启用推送通知">
                  <el-switch v-model="systemSettings.notification.enablePushNotification" />
                </el-form-item>
                <el-form-item>
                  <el-button type="primary">保存设置</el-button>
                </el-form-item>
              </el-form>
            </el-tab-pane>
          </el-tabs>
        </div>
        
        <!-- 商品审核 -->
        <div v-if="activeMenu === 'product-review'" class="content-section">
          <h2>商品审核</h2>
          <el-card class="content-card">
            <div class="toolbar">
              <el-input placeholder="搜索商品名称" style="width: 300px;" clearable>
                <template #prefix>
                  <el-icon><Search /></el-icon>
                </template>
              </el-input>
              <el-select placeholder="审核状态" style="width: 150px; margin-left: 10px;">
                <el-option label="全部状态" value="" />
                <el-option label="待审核" value="待审核" />
                <el-option label="已通过" value="已通过" />
                <el-option label="已拒绝" value="已拒绝" />
              </el-select>
              <el-button type="primary" style="margin-left: 10px;">搜索</el-button>
            </div>
            
            <el-table :data="productReviewData" style="margin-top: 20px;">
              <el-table-column prop="id" label="ID" width="80" />
              <el-table-column prop="name" label="商品名称" min-width="180" />
              <el-table-column prop="merchant" label="所属商家" width="150" />
              <el-table-column prop="category" label="分类" width="100" />
              <el-table-column prop="price" label="价格" width="100">
                <template #default="{row}">
                  ¥{{ row.price }}
                </template>
              </el-table-column>
              <el-table-column prop="status" label="状态" width="100">
                <template #default="{row}">
                  <el-tag 
                    :type="row.status === '已通过' ? 'success' : (row.status === '待审核' ? 'warning' : 'danger')"
                  >
                    {{ row.status }}
                  </el-tag>
                </template>
              </el-table-column>
              <el-table-column prop="submitTime" label="提交时间" width="180" />
              <el-table-column label="操作" width="200">
                <template #default="{row}">
                  <el-button size="small" type="primary" v-if="row.status === '待审核'">审核</el-button>
                  <el-button size="small" type="success" v-if="row.status === '待审核'">通过</el-button>
                  <el-button size="small" type="danger" v-if="row.status === '待审核'">拒绝</el-button>
                  <el-button size="small" type="info">详情</el-button>
                </template>
              </el-table-column>
            </el-table>
            
            <div class="pagination" style="margin-top: 20px; text-align: right;">
              <el-pagination
                background
                layout="total, sizes, prev, pager, next, jumper"
                :total="50"
                :page-sizes="[10, 20, 30, 50]"
                :page-size="10"
              />
            </div>
          </el-card>
        </div>
        
        <!-- 首页轮播 -->
        <div v-if="activeMenu === 'carousel'" class="content-section">
          <h2>首页轮播</h2>
          <el-card class="content-card">
            <div class="toolbar">
              <el-button type="primary">添加轮播图</el-button>
              <el-button type="success">排序设置</el-button>
            </div>
            
            <el-table :data="carouselData" style="margin-top: 20px;">
              <el-table-column prop="id" label="ID" width="80" />
              <el-table-column prop="title" label="标题" width="180" />
              <el-table-column label="图片" width="200">
                <template #default="{row}">
                  <el-image 
                    style="width: 180px; height: 90px" 
                    :src="row.image"
                    fit="cover"
                  />
                </template>
              </el-table-column>
              <el-table-column prop="link" label="链接" width="150" show-overflow-tooltip />
              <el-table-column prop="status" label="状态" width="100">
                <template #default="{row}">
                  <el-tag :type="row.status === '已上线' ? 'success' : 'info'">
                    {{ row.status }}
                  </el-tag>
                </template>
              </el-table-column>
              <el-table-column prop="startDate" label="开始日期" width="120" />
              <el-table-column prop="endDate" label="结束日期" width="120" />
              <el-table-column prop="priority" label="优先级" width="80" />
              <el-table-column label="操作" width="250">
                <template #default="{row}">
                  <el-button size="small" type="primary">编辑</el-button>
                  <el-button size="small" type="success" v-if="row.status === '未上线'">上线</el-button>
                  <el-button size="small" type="warning" v-if="row.status === '已上线'">下线</el-button>
                  <el-button size="small" type="danger">删除</el-button>
                </template>
              </el-table-column>
            </el-table>
          </el-card>
        </div>
        
        <!-- 站内通知 -->
        <div v-if="activeMenu === 'notifications'" class="content-section">
          <h2>站内通知管理</h2>
          <el-card class="content-card">
            <div class="toolbar">
              <el-input placeholder="搜索通知标题" style="width: 300px;" clearable>
                <template #prefix>
                  <el-icon><Search /></el-icon>
                </template>
              </el-input>
              <el-select placeholder="通知类型" style="width: 150px; margin-left: 10px;">
                <el-option label="全部类型" value="" />
                <el-option label="活动通知" value="活动通知" />
                <el-option label="系统通知" value="系统通知" />
                <el-option label="会员通知" value="会员通知" />
                <el-option label="商品通知" value="商品通知" />
                <el-option label="安全通知" value="安全通知" />
              </el-select>
              <el-select placeholder="发布状态" style="width: 150px; margin-left: 10px;">
                <el-option label="全部状态" value="" />
                <el-option label="已发布" value="已发布" />
                <el-option label="待发布" value="待发布" />
              </el-select>
              <el-button type="primary" style="margin-left: 10px;">搜索</el-button>
              <el-button type="success" style="margin-left: 10px;">新建通知</el-button>
            </div>
            
            <el-table :data="notificationData" style="margin-top: 20px;">
              <el-table-column prop="id" label="ID" width="80" />
              <el-table-column prop="title" label="标题" min-width="180" show-overflow-tooltip />
              <el-table-column prop="type" label="类型" width="100">
                <template #default="{row}">
                  <el-tag>
                    {{ row.type }}
                  </el-tag>
                </template>
              </el-table-column>
              <el-table-column prop="status" label="状态" width="100">
                <template #default="{row}">
                  <el-tag :type="row.status === '已发布' ? 'success' : 'warning'">
                    {{ row.status }}
                  </el-tag>
                </template>
              </el-table-column>
              <el-table-column prop="publishTime" label="发布时间" width="180" />
              <el-table-column prop="targetUsers" label="目标用户" width="120" />
              <el-table-column label="操作" width="250">
                <template #default="{row}">
                  <el-button size="small" type="primary">编辑</el-button>
                  <el-button size="small" type="success" v-if="row.status === '待发布'">发布</el-button>
                  <el-button size="small" type="warning" v-if="row.status === '已发布'">撤回</el-button>
                  <el-button size="small" type="danger">删除</el-button>
                  <el-button size="small" type="info">预览</el-button>
                </template>
              </el-table-column>
            </el-table>
            
            <div class="pagination" style="margin-top: 20px; text-align: right;">
              <el-pagination
                background
                layout="total, sizes, prev, pager, next, jumper"
                :total="50"
                :page-sizes="[10, 20, 30, 50]"
                :page-size="10"
              />
            </div>
          </el-card>
        </div>
      </el-main>
    </el-container>
  </div>
</template>

<style scoped>
.admin-view {
  height: 100vh;
  background-color: #f5f5f5;
}

.admin-container {
  height: 100%;
}

.menu-aside {
  background-color: #304156;
  color: #fff;
  height: 100%;
}

.menu-header {
  padding: 20px 0;
  text-align: center;
  border-bottom: 1px solid #1f2d3d;
}

.menu-header h2 {
  color: #fff;
  margin: 0;
  font-size: 20px;
}

.admin-menu {
  border-right: none;
  background-color: #304156;
}

.admin-menu :deep(.el-menu-item) {
  color: #bfcbd9;
}

.admin-menu :deep(.el-menu-item.is-active) {
  color: #409EFF;
  background-color: #263445;
}

.admin-menu :deep(.el-menu-item:hover) {
  background-color: #263445;
}

.admin-main {
  padding: 20px;
  background-color: #f5f5f5;
}

.content-section {
  margin-bottom: 20px;
}

.content-section h2 {
  margin-top: 0;
  margin-bottom: 20px;
  font-size: 22px;
  color: #333;
}

.content-card {
  margin-bottom: 20px;
}
</style>